<template>
  <div>
    <!-- <input type="text" v-model="ipt" v-maxLength="20"> -->
    <textarea name id cols="30" rows="10" v-maxLength="10" v-model="ipt"></textarea>
    <About type="input" maxLength="10" />
    <About type="textarea" maxLength="30" />
  </div>
</template>

<script>
import About from "@/views/About";
export default {
  data() {
    return {
      ipt: ""
    };
  },
  directives: {
    maxLength: {
      inserted(el, binding) {
        // console.log(el);
        let parentIpt = el.parentNode; //最大的div
        let divCreate = document.createElement("div"); //创建个div
        parentIpt.replaceChild(divCreate, el); //要用父元素 用创建的div替换掉ipt
        divCreate.appendChild(el); //创建的div里插入 ipt
        let spanCreate = document.createElement("span"); //创建个span
        divCreate.appendChild(spanCreate); //创建的div里再插个创建的span
        spanCreate.innerHTML = "0/" + binding.value; //0/10
        divCreate.style = "position:relative;display:inline-block";
        spanCreate.style =
          "position:absolute;top:3px;right:5px;font-size:10px;color:#999";
        if (el.tagName == "INPUT") {
          spanCreate.style =
            "position:absolute;top:3px;right:5px;font-size:10px;color:#999";
        } else if (el.tagName == "TEXTAREA") {
          spanCreate.style =
            "position:absolute;bottom:5px;right:5px;font-size:10px;color:#999";
        }
        el.setAttribute("maxLength", binding.value); //设置属性的
      },
      update(el, binding) {
        // console.log(el);
        // console.log(binging);
        let iptVal = el.value.length;
        // console.log(iptVal);
        let span = el.nextElementSibling;
        span.innerHTML = iptVal + "/" + binding.value;
        if (iptVal == binding.value) {
          el.style.color = "red";
        } else {
          el.style.color = "";
        }
      }
    }
  },
  components: {
    About
  }
};
</script>

<style scoped>
</style>